<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>

    <div id="app">
      <h3>{{str}}</h3>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const vue = new Vue({
      /* 
      data和el的两种写法
      一.el有两种写法：
       1.1 el可以直接写在vue的实例对象里 ---常用
       1.2 el可以通过$mount()后面挂载:vue.$mount("#app")  ---不常用
      二.data的两种写法:
       2.1 对象式：非组件化编码组件里可以用对象式，也可以用函数式
       2.2 函数式：组件化编码组件里必须使用函数式
      三.由Vue所管理的函数，原则上不要用箭头函数，一旦使用了，this就不对了  
      */
      // el: "#app",
      /* 
      一.data的两种写法
      */
      //1.写法一：对象
      /*  data: {
         msg: {
           str: "你好Vue"
         }
       } */
      // 2.写法二：返回函数
      data: function () {
        return {
          str: "你好Vue"
        };
      }
    })
    vue.$mount("#app")
    /* 
    二.el有两种写法：
       2.1 el可以直接写在vue的实例对象里
       2.2 el可以通过$mount()后面挂载:vue.$mount("#app")
    */
  </script>

</html>